@use '_variables' as v;

$btn-width: 20px;
$btn-height: 14px;
$line-height: 2px;

.button {
	display: block;
	background: none;
	outline: none;
	border: none;
	width: $btn-width;
	height: $btn-height;
	position: relative;
	cursor: pointer;
	padding: 0;
}

.line {
	width: $btn-width;
	height: $line-height;
	background-color: v.use(v.$colors-menu-btn-color);
	transition-property: opacity, transform, top;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
	display: block;
	position: absolute;
	border-radius: 10px;

	&.line-1 {
		top: 0;
	}

	&.line-2 {
		top: calc(50% - ($line-height / 2));
	}

	&.line-3 {
		bottom: 0;
	}
}

.open {
	> .line-1 {
		top: calc(50% - ($line-height / 2));
		transform: rotate(45deg);
	}

	> .line-2 {
		transform: rotate(-45deg);
	}

	> .line-3 {
		opacity: 0;
	}
}
